<template>
  <div class="main-body">
    <dv-loading v-show="runFlag" class="loading">Loading...</dv-loading>
    <MainTitle :main-title="mainTitle" />
    <div class="container">
      <div class="outside-frame">
        <div class="inside-frame">
          <div class="title">报警方案描述</div>
          <div class="scheme">报警方案：<span>{{ scheme }}</span></div>
          <div class="introduce">
            方案介绍：<p>{{ info.remark }}</p>
          </div>
        </div>
      </div>
      <div class="title">选择流向系统</div>
      <CheckList class="checkbox" :data="targetData" :name="'target'" @radioCheck="systemHandle" />
      <div class="title">选择报警方式</div>
      <CheckList class="checkbox" :parentuid="param.parent_uid" :data="originData" :name="'origin'" :check-data="checkData" @radioCheck="originHandle" />
      <div class="title">方案参数配置</div>
      <div class="parameter">
        {{ info.slideWindowName }}： <input v-model="info.slideWindowSize" type="text">
        {{ info.offsetName }}：<input v-model.number="info.offsetValue" type="number">
        <div class="button-group"><button @click.prevent="setConfig">确定</button><button @click="reset">重置</button></div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import 'element-ui/lib/theme-chalk/index.css'
// import { Loading } from 'element-ui'
export default {
  components: {
    MainTitle: () => import('@/components/MainTitle.vue'),
    CheckList: () => import ('./CheckList.vue')
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      scheme: '（请选择报警方式）',
      // mainTitle: '智慧节能-异常报警方案选择与配置',
      param: {
        target_category_uid: '',
        target_uid: '',
        category_uid: '',
        parent_uid: '',
        uid: ''
      },
      info: {
        slideWindowName: 'WindowSize',
        slideWindowSize: null,
        offsetName: '倍数N',
        offsetValue: null,
        remark: null
      },
      targetDataList: [],
      originDataList: [],
      checkDataList: [],
      checkedOriginData: {},
      runFlag: false
    }
  },
  computed: {
    mainTitle() {
      return '智慧节能-' + this.title
    },
    ...mapState({
      service: state => state.service,
      webModel: state => state.authentication.webModel,
      treeTemplate: state => state.component.treeTemplate
    }),
    targetData: function() {
      const arr = this.targetDataList.filter(function(item) {
        return item.info !== null && item.info.groupFlowAlarmFlag === 'TRUE'
      })
      return arr.sort((a, b) => { return a.info.order - b.info.order })
    },
    originData: function() {
      return this.originDataList.filter(function(item) {
        return !item.parent_uid && item.info !== null && item.info.eventType === 'alarmEvent'
      })
    },
    checkData() {
      return this.checkDataList.length > 0 ? this.checkDataList[0] : null
    }
    // title() {
    //   return this.originData.parent_uid
    //     ? this.checkedOriginData.find(item => item.uid === this.originData.parent_uid)
    //     : this.originData
    // }
  },
  created() {
    // this.$nextTick(() => {
    this.getAlarmConfig()
    this.getEnergyConfig()
    // })
  },
  methods: {
    originHandle(data, event) {
      this.checkedOriginData = data
      this.scheme = data.name
      this.info = { ...this.info, ...this.checkedOriginData.info }
      console.log('info', this.info)
      this.param.category_uid = data.category_uid
      this.param.parent_uid = data.uid
      this.param = { ...this.param, 'info': this.info }
      console.log('param', this.param)
    },
    systemHandle(val) {
      this.getEnergyAlarmConfig(val)
    },
    sleep(time) {
      return new Promise((resolve) => setTimeout(resolve, time))
    },
    async getEnergyConfig() {
      try {
        const result = await this.service.getEnergyGroupConfig()
        if (result && result.data) {
          this.targetDataList = result.data
        }
        console.log('流向系统', this.targetData)
      } catch (e) {
        this.$notify({
          title: '流向系统数据获取出错',
          type: 'error',
          duration: 2500
        })
      }
    },
    async getAlarmConfig() {
      try {
        this.runFlag = true
        // await this.sleep(1000)
        const result = await this.service.getAlarmTypeConfig()
        this.originDataList = result.data
        console.log('报警方式', this.originData)
        this.runFlag = false
      } catch (e) {
        this.runFlag = false
        this.$notify({
          title: '报警方式数据获取出错',
          type: 'error',
          duration: 2500
        })
      }
    },
    async getEnergyAlarmConfig(val) {
      console.log('val', val)
      this.param.target_category_uid = val.category_uid
      this.param.target_uid = val.uid
      console.log('param', this.param)
      const result = await this.service.getEnergyAlarmConfig(val)
      if (result.flag && result.data) {
        this.checkDataList = result.data
        this.info = this.checkData.info
        this.param.category_uid = this.checkData.category_uid
        this.param.parent_uid = this.checkData.parent_uid
        this.param.uid = this.checkData.uid
        console.log('当前系统对应信息', this.checkData)
        this.param = { ...this.param, 'info': this.info }
        console.log('param', this.param)
        if (this.checkData.parent_uid) {
          const originItem = this.originData.find(item => item.uid === this.checkData.parent_uid)
          this.scheme = originItem.name
          this.info.remark = originItem.info.remark
        } else {
          this.scheme = this.checkData.name
        }
      } else {
        this.param.uid = null
      }
    },
    async setConfig() {
      if (!this.param.target_category_uid) {
        this.$notify({
          title: '请选择流向系统',
          type: 'error',
          duration: 2500
        })
        return
      }
      if (!this.param.category_uid) {
        this.$notify({
          title: '请选择报警方案',
          type: 'error',
          duration: 2500
        })
        return
      }
      console.log('setparam', this.param)
      try {
        await this.service.setEnergyAlarmConfig(this.param)
        this.$notify({
          title: '保存成功',
          type: 'success',
          duration: 2500
        })
      } catch (e) {
        this.$notify({
          title: '保存失败',
          type: 'error',
          duration: 2500
        })
      }
    },
    reset() {
      this.checkedOriginData = this.originDataList.find(item => this.param.parent_uid && item.uid === this.param.parent_uid)
      this.info = { ...this.info, ...this.checkedOriginData.info }
    }
  }
}
</script>
<style lang="scss" scoped>
  .main-body{
    position: relative;
    display: flex;
    flex-flow: column;
    height: 100vh;
    background: url('~@assets/report/bg.png') no-repeat;
    background-size: 100% 100%;
    font-family: 'Microsoft Yahei';
  }
  .loading{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba($color: #333, $alpha: 0.7);
    z-index: 9;
  }
  .container{
    width: 93%;
    display: flex;
    flex-flow: column;
    height: 82%;
    margin: 0 auto;
     overflow-y:scroll;
  // 隐藏滚动条
  &::-webkit-scrollbar {// 兼容Chrome
    display: none;
  }
  &::-o-scrollbar {// 兼容Opera
    display: none;
  }
  scrollbar-width: none;// 兼容Firefox
  -ms-overflow-style: none;// 兼容edge
  }
  .outside-frame{
    display: flex;
    flex-flow: column;
    margin: 1rem 0 2rem;
    width: 100%;
    border: 3px solid #00f4ff;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    padding: 0.8rem;
  }
  .inside-frame{
    display: flex;
    flex-flow: column;
    width: 100%;
    border: 2px solid #00f4ff;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    padding: 1.5rem;
  }
  .title{
    width: 100%;
    height: 4rem;
    border-left: 2px solid #00f4ff;
    background: #071f3b;
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
    line-height: 4rem;
    padding-left: 1.5rem;
  }
  .scheme{
    height: 40px;
  }
  .scheme,.introduce{
    width: 100%;
    line-height: 4rem;
    padding: 0 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
  }
  .scheme span,.introduce p{
    line-height: 3rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: #fff;
  }
  .introduce p{
    min-height: 6rem;
  }
  .parameter{
    padding: 20px 40px;
    font-size: 1.4rem;
    color: #fff;
  }
  .parameter input{
    width: 6rem;
    height: 2.5rem;
    margin-right: 2rem;
    border: 1px solid #095faf;
    background: #0a3361;
    text-align: center;
    line-height: 2.5rem;
    color: #fff;
  }
  .button-group{
    margin-top: 3rem;
     button {
    /* width: 40px; */
    height: 3rem;
    line-height: 3rem;
    border: 1px solid #095faf;
    background: #0a3361;
    text-align: center;
    color: #fff;
    margin-right: 2rem;
    padding: 0 2rem;
    }
  }
    .checkbox{
    width: 100%;
    height: 10%;
    min-height: 6rem;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
  //去掉type=number时，右边的上下箭头
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
  }
  input[type="number"]{
    -moz-appearance:textfield;
  }
</style>
